// 定义一个名为AcGameMenu的类，用于创建和管理游戏的主菜单
class AcGameMenu {
    // 构造函数，接收一个参数类型为AcGame的root
    constructor(root) {
        this.root = root; // 保存传入的root对象

        // 使用jQuery创建一个包含游戏菜单的HTML结构，并将其保存在类的$menu属性中
        this.$menu = $(`
           <div class="ac-game-menu">
                <!-- 菜单的外部容器 -->
                <div class="ac-game-menu-field">
                    <!-- 单人模式按钮 -->
                    <div class="ac-game-menu-field-item ac-game-menu-field-item-single-mode">
                        单人模式
                    </div>
                    <!-- 多人模式按钮 -->
                    <div class="ac-game-menu-field-item ac-game-menu-field-item-multi-mode">
                        多人模式
                    </div>
                    <!-- 设置按钮 -->
                    <div class="ac-game-menu-field-item ac-game-menu-field-item-settings">
                        退出
                    </div>
                </div>
           </div>
        `);

        this.$menu.hide();

        // 将创建好的菜单HTML结构追加到root对象的$ac_game
        this.root.$ac_game.append(this.$menu);

        // 使用jQuery的find方法获取菜单中的各个按钮元素，并分别保存在类的属性中
        this.$single_mode = this.$menu.find('.ac-game-menu-field-item-single-mode'); // 单人模式按钮
        this.$multi_mode = this.$menu.find('.ac-game-menu-field-item-multi-mode');   // 多人模式按钮
        this.$settings = this.$menu.find('.ac-game-menu-field-item-settings');       // 设置按钮

        // 调用start方法，开始初始化菜单的交互功能
        this.start();
    }

    // start方法，用于初始化菜单的交互功能
    // 在这个方法中，通常会调用其他方法来添加事件监听等
    start() {
        // 调用add_listening_events方法来为菜单按钮添加点击事件监听
        this.add_listening_events();
    }

    // add_listening_events方法，用于给菜单中的各个按钮添加点击事件监听
    add_listening_events() {
        let outer = this; //通常是用于在事件处理函数中保持对类的实例的引用

        // 给单人模式按钮添加点击事件监听
        this.$single_mode.click(function () {
            //当单人模式按钮被点击时，隐藏菜单并显示游戏界面
            outer.hide();
            outer.root.playground.show("single mode");
        });

        // 给多人模式按钮添加点击事件监听
        this.$multi_mode.click(function () {
	    outer.hide();
	    outer.root.playground.show("multi mode");
        });

        // 给设置按钮添加点击事件监听
        this.$settings.click(function () {
		outer.root.settings.logout_on_remote();
        });
    }

    show() {//显示menu界面
        this.$menu.show();
    }

    hide() {//关闭菜单界面
        this.$menu.hide();
    }
}
